<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>runtime-dom</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
    <script>
      let { createApp, h, reactive } = VueRuntimeDOM;
      // 定义的appComponent 组件
      let appComponent = {
        setup(props, context) {
          let state = reactive({ num: 1 });
          // console.log("setup", props, context);
          let fn = function () {
            state.num = 9;
            state.num = 5;
            state.num = 100;
          };
          // setup可以返回state或者render函数
          // render函数可以渲染到页面
          return () =>
            h(
              "div",
              {
                onClick: fn,
              },
              state.num
            );
        },
        // render(proxy) {
        //   console.log("render");
        //   return h("div", {}, "hello world");
        // },
      };
      let app = createApp(appComponent, {
        name: "runtime-dom",
        value: "value",
      });
      app.mount("#app");
    </script>
  </body>
</html>
